<template>
  <div class="position-full">
    <div :style="{...styles.track}" class="processor-track position-full">
      <div :style="{...styles.value}" class="processor-value"></div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import {formatColor} from '@/utils';
  import {WidgetProcessor} from "@/modules/IDE/widget/atom/widgetProcessor";

  export default {
    name: 'ProcessorWidget',
    props: {
      widget: {
        type: WidgetProcessor,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {};
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      styles() {
        const {tempRect = {}} = this.widget;
        const {backStyle = {}, values = {}} = this.state;
        const {trackColor = '', valueColor = '', seconds} = this.widget.UI.data
        const trackStyles = {};
        const valueStyles = {};

        const {height = 0, width = 0} = tempRect;
        if (height) {
          trackStyles.height = `${height}px`;
          valueStyles.height = `${height}px`;
        }

        trackColor && (trackStyles.backgroundColor = formatColor(trackColor, this.activeTheme));
        valueColor && (valueStyles.backgroundColor = formatColor(valueColor, this.activeTheme));

        // 圆角
        const {borderRadius = {}} = backStyle;
        const {topLeft = 0, topRight = 0, bottomLeft = 0, bottomRight = 0} = borderRadius;
        topLeft && (trackStyles.borderTopLeftRadius = valueStyles.borderTopLeftRadius = `${topLeft}px`);
        topRight && (trackStyles.borderTopRightRadius = valueStyles.borderTopRightRadius = `${topRight}px`);
        bottomLeft && (trackStyles.borderBottomLeftRadius = valueStyles.borderBottomLeftRadius = `${bottomLeft}px`);
        bottomRight && (trackStyles.borderBottomRightRadius = valueStyles.borderBottomRightRadius = `${bottomRight}px`);

				// 默认值
        values.value && (valueStyles.width = `${(values.value / seconds).toFixed(2) * width}px`);

        return {
          track: trackStyles,
          value: valueStyles
        };
      }
    },
	  watch: {
		  'widget.tempRect': {
			  handler(tempRect) {
				  const {height} = tempRect;
				  const radius = Math.round(height / 2);
				  this.state.backStyle.borderRadius = {
					  width: radius,
					  topLeft: radius,
					  topRight: radius,
					  bottomLeft: radius,
					  bottomRight: radius,
				  };
			  }
		  }
	  },
  };
</script>

<style scoped lang="less">
  .processor-track {
    .processor-value {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
</style>
